<template>
	<div class="role-list-container">
		<div class="button-wrapper">
			<el-button class="button" @click="onCreate">添加角色</el-button>
		</div>
		<div class="item-wrapper">
			<RoleItem v-for="item in roles" :key="item.id" :role="item" :select="selectRole" @edit="onEdit" @remove="onRemove" @select="onSelect" />
		</div>
		<CreateRole
			v-show="showCreateRole"
			:show="showCreateRole"
			@close="
				() => {
					showCreateRole = false;
				}
			"
			@create="onCreated"
		/>
		<changeRoleName
			v-show="showChangeRoleName"
			:show="showChangeRoleName"
			:role="editRole"
			:roleList="roles"
			@close="
				() => {
					showChangeRoleName = false;
				}
			"
			@change="onChangeRoleName"
		/>
	</div>
</template>

<script>
import RoleItem from './RoleItem.vue';
import CreateRole from './CreateRole.vue';
import changeRoleName from './changeRoleName.vue';
import { getRoleList, deleteRole } from '../../../api/api';

export default {
	components: { RoleItem, CreateRole, changeRoleName },
	props: {
		show: {
			type: Boolean,
			default: false
		},
		userId: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			roles: [],
			showCreateRole: false,
			showChangeRoleName: false,
			editRole: {},
			selectRole: {}
		};
	},
	computed: {},
	mounted() {
		// 角色列表不展示超级管理员和机器人角色信息
		this.getRoleList();
	},

	methods: {
		onCreate() {
			this.showCreateRole = true;
		},
		onCreated() {
			this.showCreateRole = false;
			this.getRoleList();
		},
		onEdit(role) {
			this.editRole = role;
			this.showChangeRoleName = true;
		},
		onRemove(role) {
			this.$confirm(`确认要删除角色<${role.name}>吗,是否继续？`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					//
					this.deleteRole(role);
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					});
				});
		},
		onSelect(role) {
			this.selectRole = role;
			this.$emit('select', this.selectRole);
		},
		getRoleList() {
			this.roles = [];
			getRoleList()
				.then(res => {
					const { code, data } = res.data;
					if (code === 200 && data && data.length > 0) {
						data.map(item => {
							// 角色列表不展示超级管理员和机器人角色信息；
							const { id, name, permissions, canEdit } = item;
							if (canEdit) {
								const permission = permissions.map(item2 => item2.resourceId);
								this.roles.push({ id, name, permission });
							}
						});
						if (this.roles[0]) {
							this.selectRole = this.roles[0] || {};
							this.$emit('select', this.selectRole);
						}
					} else {
						console.warn('get role list  ', res);
					}
				})
				.catch(err => {
					console.error('get role list error ', err);
				});
		},
		deleteRole(role) {
			deleteRole(role.id)
				.then(res => {
					const { code, data } = res.data;
					if (code === 200) {
						// {"code":200,"data":{"used":true}}
						// {"code":200,"data":1}
						if (data && data.used) {
							// 角色<角色名>被使用，无法进行删除！ showCancelButton
							this.$confirm(`角色<${role.name}>被使用，无法进行删除！`, '提示', {
								confirmButtonText: '确定',
								showCancelButton: false,
								type: 'warning'
							});
						} else if (data === 1) {
							this.removeRole(role);
						}
					} else {
						console.warn('delete role  ', res);
					}
				})
				.catch(err => {
					console.error('delete role error ', err);
				});
		},
		onChangeRoleName(data) {
			const { role, name } = data;
			role.name = name;
			this.showChangeRoleName = false;
		},
		removeRole(role) {
			this.roles = this.roles.filter(item => item.id !== role.id);
		}
	}
};
</script>

<style lang="less" scoped>
.role-list-container {
	width: 180px;

	.button-wrapper {
		width: 180px;
		height: 60px;
		background: #ffffff;
		padding: 14px 16px;
		box-sizing: border-box;

		.button {
			width: 148px;
			height: 32px;
			background: #6384fe;
			font-size: 13px;
			font-weight: 400;
			color: #ffffff;
			// line-height: 32px;
			padding: 0;
		}
	}

	.item-wrapper {
		overflow-x: hidden;
		overflow-y: auto;
		height: calc(100% - 60px);
	}
}
</style>
